Fitts’s Law 菲茨法則

The time to acquire a target is a function of the distance to and size of the target.獲取目標所需的時間是目標距離和大小的函式。目標越大、距離越近，使用者指向並點選它的速度就越快。

Takeaways 要點

• 按鈕要夠大，使用者才點得準。

• 按鈕之間要有足夠的間距，別擠在一起。

• 按鈕要放在容易點到的地方，別讓人費勁去找或點。

Origins 起源

1954年，心理學家保羅·菲茨發現了一個簡單的道理：當我們要點選或碰觸某個東西時，這個動作的用時取決於兩個因素。第一，目標離我們有多遠；第二，目標有多大。

他發現：目標越遠，需要的時間越長，目標越小，越難準確點中，如果動作太快，容易出錯

這個發現被稱為菲茨法則，現在廣泛用於設計手機應用和網頁介面。比如，手機上的按鈕要設計得夠大，這樣用手指才容易點選。同時，常用的按鈕最好放在容易夠到的地方，這樣使用起來更方便。

Fitts 還提出了一個叫做 “難度指數（index of difficulty, ID）” 的指標，用來量化選擇目標任務的難度。目標中心的距離 D 類似於訊號（signal），而目標寬度 W 表示誤差容忍度，類似於噪音（noise）。難度指數的計算公式如下：

ID = log₂ (2D / W)

這個公式揭示了：距離越遠 D 越大、目標越小 W 越小，選擇難度就越高。

簡單來說，這個法則有兩個核心要點：

1. 目標距離越遠，移動時間越長。換句話說，近的目標更容易點選。

2. 目標越大，移動時間越短。換句話說，大的目標更容易點選。

讓我們用簡單的例子來解釋：如果有三個按鈕A、B和C，按鈕A最容易點選。為什麼呢？因為：
A和B一樣大，但是A離滑鼠更近，所以點A更快
A和C離滑鼠一樣近，但是A更大，所以也更容易點中

這個規律有個特點：當我們移動滑鼠時，距離變成兩倍並不意味著時間也變成兩倍。這是因為我們移動滑鼠時會先快後慢 - 開始時速度快，接近目標時會放慢速度，以確保準確點選。

Examples 案例

二戰時，美軍飛機老是出事，光 22 個月就有 457 起墜機，很多人說是飛行員犯錯。但 Fitts 注意到這些事故並不隨機，說明另有原因。他和同事Alfonse Chapanis 一調查才發現，原來是飛行員在緊張時會把兩個長得一樣的控制桿搞混——一個是襟翼，一個是起落架。

為了解決這個問題，Chapanis 發明了"形狀編碼"技術——給不同控制桿設計獨特的觸感，讓飛行員一摸就能分辨，即使在黑暗或緊急情況下也不會混淆。這一創新孕育了人因工程學的核心理念：不是讓人適應機器，而是讓機器適應人的侷限和習慣。這種設計思維認識到人在壓力和混亂中難以保持完全理性，因此設計必須考慮這一現實情況。

Two-Component Model 兩階段模型

伍德沃斯在19世紀末研究發現，當我們想點選或觸控某個目標時，這個動作可以分成兩個簡單的步驟：

1. 第一步：快速移動 - 我們會先快速地把手或滑鼠朝著目標大致移動過去

2. 第二步：精確定位 - 接近目標時會放慢速度，小心地對準目標

這兩個步驟分別受不同因素影響：第一步主要看目標離我們有多遠，越遠移動時間越長；第二步主要看目標有多大，目標越小，我們就需要放得越慢才能準確點中它，不會點錯。

Optimizing Target Size 最佳化目標大小

Icons Plus Labels 圖示加標籤：我們一直強調圖示需要標籤。標籤不僅減少歧義便於理解，還能縮短觸達時間。原因很簡單:圖示加標籤的區域比單獨圖示更大，根據菲茨法則更容易點選(前提是整個區域都可點選，而不是隻有圖示可點)。

Infinite Targets Along Screen Edges 螢幕邊緣的無限目標：當目標區域特別大時，移動會更加容易。這是因為使用者不需要擔心滑鼠或手指會超出目標範圍，可以在目標區域內的任何位置停下來都行。

Padding Is Not Enough 圖示周圍的可點選區域：設計師有時會在圖示周圍設定一個看不見的可點選區域，讓使用者更容易點中。但是如果使用者不知道有這個額外區域，他們還是會小心翼翼地去點選圖示本身，反而花更多時間。

Optimizing Distance to Target 最佳化目標距離

不同型別的選單比較：

• 線性選單（豎排選單）：點選第一個選項最快，最後一個選項最慢。所以我們應該把最常用的選項放在最上面。

• 矩形選單（格子狀排列）：比線性選單更好，因為所有選項到選單按鈕的距離都比較近。

• 餅狀選單（圓形排列）：所有選項到中心的距離都一樣，所以點選任何選項的速度都一樣快。不過因為大家不習慣用這種選單，所以不常見。

小技巧：如果是簡單的線性選單，而且所有選項都一樣常用，可以把選單按鈕放在中間位置。這樣上面和下面的選項離得遠一些，中間的選項最容易點選。

Examples（例項）

觸控目標尺寸至關重要：目標過小會延長點選時間。各設計規範雖略有不同，但都認同目標尺寸直接影響操作效率。這些尺寸是"最小標準"，更大的尺寸讓使用者操作更輕鬆，體驗更佳。相反，按鈕太小會讓使用者感到不便，即使沒有出錯也會產生負面感受。

按鈕太擠，會容易誤觸。MIT 研究發現，大多數人的指尖寬 16–20 毫米，也就是說點選的時候經常會碰到邊上的按鈕。Google 建議按鈕之間至少隔 8dp，這樣既好操作也不會太密集。按鈕位置很重要。手機大小和握法不同，單手拇指操作時有些位置難以觸及，雙手則較容易。研究顯示螢幕中央區域最易點準，而非上下角落。設計時需考慮這些使用習慣。

來看個常見例子：表單裡的“使用者名稱”標籤。如果設計成點選“使用者名稱”這幾個字也能讓輸入框獲得焦點，那使用者就不用點得很準，體驗會更好。無論是桌面還是手機都適用。

繼續以表單為例，Fitts 法則應用於提交按鈕位置佈局。提交按鈕通常放在最後輸入框旁，因為關鍵動作應靠近活躍元素。這種佈局既明確按鈕與輸入間的關聯，又縮短使用者手勢路徑，減少操作時間。

互動元素間距是Fitts法則的關鍵設計要素。LinkedIn的iOS應用就是反例：連線請求時，"接受"與"拒絕"按鈕靠得太近，使用者需特別專注才能避免誤觸。每次遇到這介面，都會改用雙手操作，以防拇指誤點"接受"按鈕。

Fitts法則適用於各種介面設計。以汽車為例，Tesla Model 3使用15英寸觸屏控制大多數功能，沒有觸覺反饋，這要求駕駛員分心看螢幕，增加風險。在這種情況下，按鈕設計直接關係到駕駛安全。

前文提到拇指區域時強調：難夠到的介面位置會增加點選難度。為解決大屏手機單手操作問題，Apple引入了Reachability（可達性）功能，讓使用者透過簡單手勢將頂部內容"拉"到螢幕下半部此設計提高了單手操作上方區域的便利性，解決了單手模式下的觸達問題。

Fitts法則也適用於無限目標（infinite targets）。這類目標不需擔心"點過頭"，只要游標到達區域即可。螢幕邊緣形成"物理牆"，讓游標自然停止，降低選中難度。macOS利用此特點在螢幕底部放置Dock，頂部放置選單欄，讓使用者無需減速即可準確點選邊緣元素，提高互動效率。

Fitts 法則不僅管滑鼠或手指，連眼睛也算。像 Vision Pro 那種裝置，系統會把重要內容放在你視野中心，操作就更省力。Apple 還說，按鈕邊上不要太尖，做成圓角更好點，不然眼睛容易被邊緣吸引，點不準。

技術方法 TECHNIQUE

Fitts 和 Chapanis 的研究其實就是情境訪談的原型。他們的方法是去現場觀察使用者怎麼工作，邊看邊問，而不是隻靠事後回憶。這樣你能看到使用者真正是怎麼做事情的，很多細節是他們自己都說不出來的，但你可以直接看到。

Primer 引導階段
為了讓參與者更順利地進入訪談狀態，應先自我介紹，說明本次訪談的目標，並向對方清晰傳達訪談流程與預期。一定要明確告知：他們提供的反饋將被保密處理。

Contextual interview 情境訪談階段

你可以跟使用者說：“我接下來會看你怎麼工作，有時候會問你為什麼這麼做。”如果他們不方便被打斷，也要提前說好。你一邊看一邊學，遇到不明白的地方就問。“你為什麼點這個？”、“你是不是每次都這樣做？”重點不是操作本身，而是他們的想法和原因。你也可以猜一下他們在做什麼，但最好留到最後再問他們對不對，別一開始就打斷太多。

Wrapping up 收尾階段

最後你要跟使用者核對一下：你是不是這樣做的？我有沒有理解錯？你也可以說出你的筆記和觀察，看他們有沒有要補充或糾正的地方。

選單按鈕應放在選項中間位置，方便快速訪問。手機應用中，選項選單應在按鈕附近彈出，而不是在遠處（如螢幕底部），以減少手指移動距離。

Place Related Targets Close to Each Other 將相關目標放置在彼此附近：相關的互動元素應該放在一起（保持適當間距），以提高操作效率。提交按鈕應放在表單底部靠近最後一個輸入框，而不是放在頁面頂部。